<template>
  <component>
    <table style='width: 100%;height: auto'>
      <template  v-for='(item, index) in inItem' :key='index'>
        <tr v-if='item.left.label !== ""' style='text-align: center;font-size: 0.6em'>
          <template v-if='item.left.value === "无异常"'>
            <th class='usal-label'>{{item.left.label}}</th>
            <td class='usal'>无事故迹象</td>
          </template>
          <template v-else-if='item.left.value !== ""'>
            <th class='unusal-label'>{{item.left.label}}</th>
            <td class='unusal'>异常</td>
          </template>

          <template v-if='item.right.value === "无异常"'>
            <th class='usal-label'>{{item.right.label}}</th>
            <td class='usal'>无事故迹象</td>
          </template>
          <template v-else-if='item.right.value !== "" && item.right.label !== undefined'>
            <th class='unusal-label'>{{item.right.label}}</th>
            <td class='unusal'>异常</td>
          </template>

        </tr>
      </template>

    </table>
  </component>
</template>

<script setup lang='ts'>
import { defineProps, PropType, ref } from 'vue';
export interface Itemtype {
  label: string,
  value: string
}
interface InItems {
  left: Itemtype,
  right: Itemtype
}

const props = defineProps({
  items:{
    type: Object as PropType<Itemtype[]>,
  }
});

let inItemSwap = []
const items = props.items;
let swap = null;
items.forEach((item,index) => {
  if  (index%2 === 0) {
    swap = {left: {},right: {}};
    swap.left = item
    if (index === items.length) {
      inItemSwap.push(swap);
    }
  } else if (index%2 === 1) {
    swap.right = item
    inItemSwap.push(swap);
  }

})
let inItem = ref<InItems[]>(inItemSwap)


</script>

<style scoped lang='sass'>
.usal-label
  background-color: #E9E8E9
.usal
  border: 1px solid #E9E8E9
.unusal-label
  background-color: #F1C041
.unusal
  color: red
</style>
